<template>
    <div class="courseInfoList">
      <!--<ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
        <li v-for="item in courseInfo">{{ item }}</li>
      </ul>-->
      <mt-header title="下学期课程信息">
        <router-link to="InfoList" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <mt-cell
        v-for=" (item,index) in courseInfo"
        :title="item.courseId"
        :label="item.label"
        @click.native.prevent="checkDetails(index,courseInfo)">
      </mt-cell>
    </div>
</template>
<style>
</style>
<script>
    export default{
        name : 'courseInfoList',
        data(){
            return{
                courseInfo:[]
            }
        },
        components:{
        },
        mounted:function(){
            this.$nextTick(function(){
                this.initList();
            })
        },
        methods:{
            //
            loadMore() {
              this.loading = true;
              setTimeout(() => {
                let last = this.list[this.list.length - 1];
                for (let i = 1; i <= 10; i++) {
                  this.list.push(last + i);
                }
                this.loading = false;
              }, 2500);
            },

            //init list
            initList:function(){
                // GET /someUrl
                this.$http.get('/static/dt.json').then(response => {
                    //get body news notice
                    for (const element of response.body.courseInfo){
                        //push to tableData[]
                        this.courseInfo.push(element);
                    }
                }, response => {
                    // error callback
                    alert("no file page");
                });
            },
            //check course details
            checkDetails:function(index,rows){
                this.$router.push({ name: 'CourseDetails', params: { courseId: rows[index].courseId }})
            }

        }
    }
</script>
